/* eslint-disable no-unused-vars */
/* eslint-disable class-methods-use-this */
/* eslint-disable no-param-reassign */
/* eslint-disable import/no-cycle */
import { Button, Space, Form, Tabs, Radio, Input, Row, Col } from 'antd';
import React from 'react';
import BaseContainerControl from './BaseContainerControl';
import ControlPlus from './ControlPlus';
import ControlUtil from './ControlUtil';

const { TabPane } = Tabs;
/**
 * 分页容器控件
 */
class TabContainerControl extends BaseContainerControl {
  constructor(props, dataProps, extProps) {
    const dataProps2 = {
      title: '分页容器',
      type: 'tabcontainer',
      defaultActiveKey: 'tab-1',
      canAddChild: false,
      ...dataProps,
    };
    super(props, dataProps2, extProps);
    this.name = '分页容器';
    this.activeKey = this.data.defaultActiveKey;
    // this.icon = '';
  }

  getPropertyTabs(parentForm) {
    return [
      ...super.getPropertyTabs(parentForm),
      <TabPane tab="控件配置" key="3">
        <Form.Item label="分页集合">
          <div>
            <Button
              type="link"
              onClick={() => {
                const c = ControlPlus.create('flexcontainer');
                c.data.custom = true;
                c.data.order = this.data.childControls.length + 1;
                c.init(parentForm);
                this.data.childControls = [...this.data.childControls, c];
                parentForm.refreash();
              }}
            >
              添加分页
            </Button>
          </div>
          <Radio.Group
            onChange={(e) => {
              this.data.defaultActiveKey = e.target.value;
              parentForm.refreash();
            }}
            value={this.data.defaultActiveKey}
          >
            {this.data.childControls.map((item, index) => {
              const index2 = `${index}`;
              return (
                <div key={index2}>
                  <Radio value={`tab-${index}`}>
                    <div>
                      <Input
                        style={{ width: '80%' }}
                        placeholder="标题"
                        value={item.data.title}
                        onChange={(event) => {
                          item.data.title = event.target.value;
                          parentForm.refreash();
                        }}
                      />
                      <Button
                        type="link"
                        onClick={() => {
                          this.data.childControls.splice(index, 1);
                          this.data.childControls = [...this.data.childControls];
                          parentForm.refreash();
                        }}
                      >
                        删除
                      </Button>
                    </div>
                  </Radio>
                </div>
              );
            })}
          </Radio.Group>
        </Form.Item>
      </TabPane>,
    ];
  }

  getDesignControl(parentForm) {
    return (
      <Tabs
        defaultActiveKey={this.activeKey}
        {...this.extProps}
        onChange={(event) => {
          this.activeKey = event;
          this.extProps?.onChange && this.extProps?.onChange(event);
        }}
      >
        {this.data.childControls.map((item, index) => {
          const index2 = `${index}`;
          return (
            <TabPane tab={item.data.title} key={`tab-${index2}`}>
              {item.render(parentForm)}
            </TabPane>
          );
        })}
      </Tabs>
    );
  }
}

export default TabContainerControl;
